<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户查询</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resource/layui/css/layui.css"
	media="all">
</head>
<body>

	<br>

	<div class="demoTable">
		搜索用户名：
		<div class="layui-inline">
			<input class="layui-input" name="inputUsername" id="searchReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="userListTable" lay-filter="user"></table>

	<script src="<%=request.getContextPath()%>/resource/layui/layui.js"
		charset="utf-8"></script>

	<script>
		layui.use('table', function() {
			var table = layui.table;

			//方法级渲染
			table.render({
				elem : '#userListTable',
				url : 'lists',
				cols : [ [ {
					field : 'id',
					title : '用户编号',
					sort : true,
				}, {
					field : 'username',
					title : '用户名',
				}, {
					field : 'password',
					title : '密码',
				}, {
					field : 'nickname',
					title : '昵称',
				}, {
					field : 'age',
					title : '年龄',
					sort : true
				}, {
					field : 'sex',
					title : '性别',
					templet : '#sex'
				} ] ],
				id : 'tableReload',
				page : true,
				height : 310
			});

			var $ = layui.$, active = {
				reload : function() {
					var searchReload = $('#searchReload');

					//执行重载
					table.reload('tableReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							username : searchReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
	</script>

	<script type="text/html" id="sex">
  			{{#  if(d.sex == true){ }}
    			<span style="color: #00BFFF;">男</span>
  			{{#  } else { }}
    			<span style="color: #F581B1;">女</span>
  			{{#  } }}
	</script>
</body>
</html>